<template>
  <div id="drawer-target">
    <n-card>
      <!-- 表格 -->
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        :pagination-setting="pagination"
        @update:checked-row-keys="handleCheck"
      />
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <UserModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" @reload="handleSearch" />

  <!-- 详情 - 抽屉 -->
  <n-drawer v-model:show="showDraw" :width="'calc(100% - 2px)'" :placement="'right'" resizabl to="#drawer-target">
    <n-drawer-content title="图片位置" closable>
      <draw-comp :detail="rowData" @close="showDraw = false;handleSearch()" />
    </n-drawer-content>
  </n-drawer>

</template>

<script>
import { ref, toRefs, reactive, unref, onUnmounted, watch } from 'vue'
import DataTable from '@/components/DataTable/index.vue'
import UserModal from './components/UserModal.vue'
import DrawComp from './components/DrawComp.vue'
import table from './tools/table'
import { search } from './tools/search'
import pagination from './tools/pagination'
import { getOrderByQuestion } from '@/api/order-work/index'
import { useRoute } from 'vue-router'
import { TASK_QUESTION_STATUS } from '@/utils/dictionary'
import { arrToObj } from '@/utils/handleData'

export default {
  name: 'TaskAll',
  components: { DataTable, UserModal, DrawComp },
  props: {
    detail: {
      type: Object,
      required: true
    },
    type: {
      type: [Number, String],
      default: 1
    }
  },
  setup(props) {
    // const route = useRoute()
    // const workOrderId = route.query.rowId
    // const workOrderType = Number(route.query.type)
    const workOrderId = props.detail.id
    const workOrderType = Number(props.type)
    // 处理多余模块：1处理, 2详情
    table.disposeBtn = workOrderType === 1

    const data = reactive({
      ...toRefs(table),
      ...toRefs(search)
    })

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res,
        workOrderId
      }

      const temp = await getOrderByQuestion(_params)
      // 拼接经纬度
      temp.data.records = temp.data.records.map(it => ({
        ...it,
        lnglat: `${it.longitude}, ${it.latitude}`,
        statusName: arrToObj(TASK_QUESTION_STATUS, 'value', 'label')[it.status]
      }))
      return temp
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }

    onUnmounted(() => {
      data.searchParams = null
      data.showDraw = false
    })

    // 生成工单、确认、忽略 的按钮能否点击
    const noBtn = ref(true)
    watch(() => selectedIds.value, (val) => {
      noBtn.value = val.length === 0
    })

    return {
      ...toRefs(data),
      loadDataTable,
      pagination,
      handleCheck,
      noBtn,
      workOrderType
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.btn {
  margin-right: 20px;
}
</style>
